import React from "react";
import DrugCard from "./card"
import { useState } from "react";
import { Card } from 'antd';
import "./displayArea.css"
import emitter from '../utils/events';
import Item from "antd/lib/list/Item";


class DisplayArea extends React.Component{
    
    constructor(props) {
        super(props);
        this.state= {
            prescriptionList:[[]]
        //    title:this.props.title,
        //    content:this.props.content,
        }
    }
    componentDidMount() {
        // 组件装载完成以后声明一个自定义事件
        this.eventEmitter = emitter.addListener('changePrescription', (message) => {
            debugger
            let curList = this.state.prescriptionList
            let nextCard = [[
                message.title,
                message.content
            ]]
            curList = curList.filter((item)=>{
                return item[0] != nextCard[0][0] && item[1] != nextCard[0][1]
            })
            nextCard = nextCard.concat(curList)
            this.setState({
                prescriptionList:nextCard
            });
        });
    }
    componentWillUnmount() {
        emitter.removeListener(this.eventEmitter);
    }
    // let [title ,setTitle ] = useState("")
    // let [content , setContent] = useState("")

    // useEffect(()=>{
    //     setTitle(props.title)
    //     setContent(props.content)
    // },[props])


    render() {return(<div class="site-card-border-less-wrapper" style={{height:'30%',overflowY:'scroll'}}>
        {this.state.prescriptionList.map((Item,i)=>{
            return (<Card
                title={Item[0]}
                bordered={false}
                style={{
                    height:"100%",
                    width: "100%",
                }}
              >
                <p>{Item[1]}</p>
                
              </Card>)
        })}
  </div>)}
}

export default DisplayArea;